<template>
	<view class="rf-category">
		<view class="select-mask" v-if="currentMenuId" @tap="tapMaskHandler" @touchmove.stop.prevent="touchMaskHandler">
		</view>
		<view class="header-top-fixed" :style="'top:' + titleBarHeight + 'px;'" id="fixedTop">
			<!--顶部搜索导航栏-->
			<view class="input-box">
				<view class="home-text" :class="'text-'+themeColor.name">选课</view>
				<view class="input-block">
					<input @tap.stop="toSearch" disabled :value="hotSearchDefault || '请输入关键字'" style="color:#888;"
						placeholder-style="color:#ccc;" />
					<view class="iconfont iconsousuo2" @tap.stop="toSearch"></view>
				</view>
			</view>
			<!-- 下拉筛选 -->
			<view class="select-block">
				<!-- <view class="select-v-item" @tap="showSelectHandler('simple')">
					综合<view class="icon-sj"></view>
				</view> -->
				<view class="select-v-item" @tap="showSelectHandler('complex')">
					课程分类<view class="icon-sj"></view>
				</view>
			</view>
			<!-- 下拉具体筛选 -->
			<view class="simple-select-block" v-if="currentMenuId == 'simple'">
				<view :class="currentSortId == item.id ? 'active': ''" v-for="(item,index) in simpleMenuList"
					:key="index" @click="selectcategoryHandler(item,'simple')">{{item.name}}</view>
			</view>
			<view class="cpmplex-select-block" v-if="currentMenuId == 'complex'">
				<view class="complex-left-block">
					<view :class="current_complex_CateId == item.id ? 'active': ''"
						v-for="(item,index) in complexMenuList" :key="index"
						@click="selectcategoryHandler(item,'current_complex_CateId')">{{item.name}}</view>
				</view>
				<view class="complex-right-block">
					<view :class="currentCateId == item.id ? 'active': ''" v-for="(item,index) in complexMenuSecondList"
						:key="index" @click="selectcategoryHandler(item,'complex')">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="list-block" :style="'padding-top:' + fixTopHeight + 'px;'">
			<view class="list-item" v-for="(item,index) in courseList" :key="index">
				<view class="list-left-block" @click="toDetail(item)">
					<view class="list-tag"><span v-for="(item,index) in item.label" :key="index">{{item}}</span></view>
					<img class="avatar-list" :src="item.image"></img>
				</view>
				<view class="list-right-block">
					<view class="list-r-title">{{item.title}}</view>
					<view class="list-r-cont">{{item.abstract}}</view>
					<view class="list-r-d-block">
						<view>80人报名</view>
						<!-- <view class="list-status">免费</view> -->
					</view>
				</view>
			</view>
			<view style="height: 120upx;"></view>
		</view>
		<rf-empty :bottom="bottom" :info="'暂无课程分类'" v-if="courseList.length === 0 && !loading"></rf-empty>
		<!--加载动画-->
		<!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
	</view>
</template>
<script>
	import {
		productCate,
		productList
	} from '@/api/product';
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				simpleMenuList: [{
						name: '最新',
						id: 1
					},
					{
						name: '最热',
						id: 2
					},
					{
						name: '价格升序',
						id: 3
					},
					{
						name: '价格降序',
						id: 4
					},
				],
				complexMenuList: [],
				complexMenuSecondList: [],
				currentCateId: '',
				currentSortId: '',
				current_complex_CateId: '',
				currentMenuId: '',
				hotSearchDefault: '', // 搜索默认关键字
				showCategoryIndex: 0, // 一级菜单高亮显示序号
				loading: true,
				courseList: [],
				price: '',
				total_sales: '',
				loadingType: 'more',
				page: 1,
				limit: 20,
				productLoading: true,
				titleBarHeight: 0,
				fixTopHeight: 44
			};
		},
		computed: {
			bottom() {
				let bottom = 0;
				/*  #ifdef H5  */
				bottom = 90;
				/*  #endif */
				return bottom;
			}
		},
		filters: {
			filterTotalSales(val) {
				if (val > 10000) {
					val = `${(val / 10000).toFixed(2)}w`;
				}
				return val;
			}
		},
		// 每次页面显示 执行该方法
		onLoad() {},
		onShow() {
			this.initData();
			this.getProductCate()
		},
		onReady() {
			//#ifdef H5
			this.titleBarHeight = 44
			//#endif
			let self = this;
			const query = uni.createSelectorQuery().in(this);
			query.select('#fixedTop').boundingClientRect(data => {
				self.fixTopHeight = data.height
			}).exec();
		},
		onHide() {
			uni.removeStorageSync('indexToCateId')
		},
		methods: {
			showSelectHandler(id) {
				this.currentMenuId = this.currentMenuId == id ? '' : id
			},
			tapMaskHandler(e) {
				this.currentMenuId = '';
			},
			toDetail(item) {
				this.$mRouter.push({
					route: `/pages/courseTypeDetail/courseTypeDetail?id=${item.id}`
				});
			},
			touchMaskHandler() {},
			selectcategoryHandler(item, tag) {
				if (tag == 'simple') {
					this.currentSortId = item.id
				} else if (tag == 'complex') {
					// 右侧二级分类
					this.currentCateId = item.id
					this.getProductList()
					this.currentMenuId=''
				} else if (tag == 'current_complex_CateId') {
					// 左侧一级分类
					this.current_complex_CateId = item.id
					this.complexMenuSecondList = item.children;
					if (this.complexMenuSecondList.length == 0) {
						this.currentCateId = item.id
						this.getProductList()
						this.currentMenuId=''
					}
				}
			},
			...mapMutations(['setCartNum']),
			// 跳转至商品列表
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			// 数据初始化
			async initData() {
				let current_complex_CateId = uni.getStorageSync('indexToCateId');
				if (current_complex_CateId) {
					this.current_complex_CateId = current_complex_CateId;
				} else {
					this.current_complex_CateId = ''
					this.currentCateId = ''
				}
			},
			// 获取商品分类
			async getProductCate(type) {
				await this.$http.get(`${productCate}`)
					.then(async r => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						this.complexMenuList = r.data;
						this.complexMenuList.unshift({
							id: 0,
							name:'全部',
							children: []
						})
						if (this.complexMenuList.length > 0) {
							this.complexMenuSecondList = this.complexMenuList[0].children;
							if (this.currentCateId) {
								this.complexMenuList.forEach(item => {
									if (item.id == this.current_complex_CateId) {
										if (item.children[0]) {
											this.currentCateId = item.children[0].id
										}
										this.complexMenuSecondList = item.children
									}
								})
							}
							if (!this.currentCateId) {
								if (this.complexMenuList[0]) {
									this.current_complex_CateId = this.complexMenuList[0].id
									if (this.complexMenuList[0].children.length) {
										this.currentCateId = this.complexMenuList[0].children[0].id
									}
								}
							}
						}
						this.page = 1;
						await this.getProductList();
						this.loading = false;
					})
					.catch(() => {
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						this.loading = false;
					});
			},
			// 获取产品列表
			async getProductList() {
				const params = {
					subject_id: this.currentCateId,
					search: this.hotSearchDefault,
					page: this.page,
					limit: this.limit
				};
				await this.$http.get(`${productList}`, params)
					.then(res => {
						this.courseList = res.data;
					});
			},
			// 跳转至搜索详情页
			toSearch() {
				this.$mRouter.push({
					route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
				});
			},
			getMoreProductList() {
				if (this.loadingType === 'nomore' || this.categoryProductList.length === 0) return;
				this.page++;
				this.getProductList();
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $color-white;
		height: 100%;
	}

	.home-text {
		font-size: 36upx;
		font-weight: bold;
		margin-right: 20upx;
		line-height: 60upx;
	}

	.rf-category {
		height: 100%;
		background-color: #fff;

		.input-box {
			position: relative;
			display: flex;
			padding: 10upx 20upx;
			background-color: #fff;

			.iconfont {
				font-weight: 500;
			}

			.iconsousuo2 {
				position: absolute;
				top: 0;
				left: 10upx;
				width: 60upx;
				line-height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}

			.input-block {
				position: relative;
				flex: 1;
				height: 60upx;
				background-color: #f5f5f5;
				border-radius: 30upx;
				color: #888;
			}

			input {
				width: 100%;
				height: 60upx;
				text-indent: 50upx;
				font-size: 28upx;
				outline: none;
			}
		}

		.select-block {
			padding: 20upx 20upx 10upx 20upx;
			display: flex;
			height: 80upx;
			background-color: #fff;
			margin-top: -2upx;
		}

		.select-v-item {
			width: 50%;
		}

		.icon-sj {
			display: inline-block;
			width: 0;
			height: 0;
			margin-left: 10upx;
			vertical-align: middle;
			border-left: 10upx solid transparent;
			border-right: 10upx solid transparent;
			border-top: 10upx solid #000;
		}

		.simple-select-block {
			margin-top: -2upx;
			background-color: #fff;
			padding: 10upx 20upx;
			max-height: 500upx;
			overflow-y: auto;

			view {
				padding: 20upx 0;
			}

			.active {
				color: red;
			}
		}

		.header-top-fixed {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 9;
		}

		.cpmplex-select-block {
			margin-top: -2upx;
			display: flex;
		}

		.complex-left-block {
			background-color: rgb(247, 247, 247);
			max-height: 500upx;
			overflow-y: auto;

			view {
				padding: 26upx 20upx;
			}

			.active {
				background-color: #fff;
				color: red;
			}
		}

		.complex-right-block {
			margin-left: -2upx;
			background-color: #fff;
			flex: 1;
			max-height: 500upx;
			overflow-y: auto;

			.active {
				color: red;
			}

			view {
				padding: 26upx 20upx 26upx 40upx;
			}
		}
	}

	.select-mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9;
		background-color: rgba(0, 0, 0, .3);
	}

	.list-block {
		padding-top: 80upx;
		// margin-top: ;
		background-color: #fff;
	}

	.list-item {
		display: flex;
		padding: 20upx 20upx 0 20upx;

		.list-left-block {
			width: 260upx;
			height: 200upx;
			flex-basis: 200upx;
			position: relative;
		}

		.avatar-list {
			width: 260upx;
			height: 200upx;
		}

		.list-right-block {
			flex: 1;
			margin-left: 40upx;
			padding-bottom: 20upx;
			border-bottom: solid 2upx #ccc;
			display: flex;
			flex-direction: column;
		}

		.list-r-cont {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3; //行数
			-webkit-box-orient: vertical;
			flex: 1;
			margin: 20upx 0;
		}

		.list-r-title {
			font-size: 30upx;
			line-height: 40upx;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; //行数
			-webkit-box-orient: vertical;
		}

		.list-r-d-block {
			margin-top: 52upx;
			display: flex;
			justify-content: space-between;
			font-size: 22upx;
			color: #ccc;

			view {
				line-height: 1em;
			}
		}

		.list-status {
			color: red;
			font-weight: bold;
			font-size: 30upx;
		}

		.list-tag {
			position: absolute;
			left: 0;
			top: 0;
			background-color: red;
			color: #fff;
			width: 100upx;
			text-align: center;
			font-size: 20upx;
		}
	}
</style>
